<template>
  <div class="my-teams">
    <div class="header">
      <span class="back" @click="goBack">&lt;</span>
      <span class="title">我的班组</span>
    </div>
    <div class="team-list">
      <div v-for="team in teams" :key="team.id" class="team-card" @click="showTeamDetail(team.id)">
        <div class="team-main">
          <div class="team-info">
            <div class="team-name">{{ team.name }}</div>
            <div class="team-leader">班组长：{{ team.leader }}</div>
            <div class="team-members">成员人数：{{ team.members }}人</div>
          </div>
          <div class="team-actions">
            <span class="star" :class="{active: team.collected}" @click.stop="toggleCollect(team)"></span>
            <span class="arrow">&gt;</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useTeamStore } from '../stores/TeamStatsStore.js'

const router = useRouter()
const teamStore = useTeamStore()
const teams = computed(() => teamStore.teams.filter(t => t.joined))

function toggleCollect(team) {
  teamStore.toggleCollect(team.id)
}

function showTeamDetail(teamId) {
  router.push(`/my-team-detail/${teamId}`)
}

function goBack() {
  router.back()
}
</script>

<style scoped>
.my-teams {
  background: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 24px;
  box-sizing: border-box;
  max-width: 375px;
  margin: 0 auto;
}
.header {
  display: flex;
  align-items: center;
  height: 48px;
  background: #fff;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #f0f0f0;
  padding: 0 16px;
}
.back {
  font-size: 22px;
  margin-right: 12px;
  color: #333;
  cursor: pointer;
}
.title {
  flex: 1;
  text-align: left;
}
.team-list {
  margin: 16px 0 0 0;
  padding: 0;
}
.team-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px #f0f1f2;
  margin: 0 16px 12px 16px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
}
.team-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.team-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.team-name {
  font-weight: bold;
  font-size: 16px;
  color: #222;
}
.team-leader, .team-members {
  color: #888;
  font-size: 13px;
}
.team-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: 120px;
}
.star {
  width: 22px;
  height: 22px;
  display: inline-block;
  background: url('data:image/svg+xml;utf8,<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 2.5l2.472 6.13 6.528.47-5.1 4.47 1.6 6.43L11 16.1l-5.5 3.9 1.6-6.43-5.1-4.47 6.528-.47L11 2.5z" stroke="%23FFD700" stroke-width="1.5" fill="none"/></svg>') center/contain no-repeat;
  cursor: pointer;
  transition: all 0.2s;
}
.star.active {
  background: url('data:image/svg+xml;utf8,<svg width="22" height="22" viewBox="0 0 22 22" fill="%23FFD700" xmlns="http://www.w3.org/2000/svg"><path d="M11 2.5l2.472 6.13 6.528.47-5.1 4.47 1.6 6.43L11 16.1l-5.5 3.9 1.6-6.43-5.1-4.47 6.528-.47L11 2.5z" stroke="%23FFD700" stroke-width="1.5" fill="%23FFD700"/></svg>') center/contain no-repeat;
}
.arrow {
  color: #ccc;
  font-size: 20px;
  margin-left: 2px;
}
.desc {
  margin: 48px 0 0 0;
  color: #888;
  font-size: 22px;
  text-align: center;
  letter-spacing: 1px;
}
</style> 